<template>
    <!-- 注意初始化时fileDatail是null会报错，所以要用v-if判断 -->
    <div v-if="filmDetail">
        <img class="poster" :src="filmDetail.poster" />
        <h2>{{ filmDetail.name }}</h2>
        <p>{{ filmDetail.synopsis }}</p>
        <hr />
        <h4>主演</h4>
        <!-- class是样式，myclassname是为了传参 -->
        <swiper :key="'actorswiper' + filmDetail.actors.length" class="actorswiper" myclassname="actorswiper" perview="4">
            <div v-for="actor in filmDetail.actors" :key="actor.name" class="swiper-slide">
                <img :src="actor.avatarAddress" />
                <span v-if="actor.name">{{ actor.name }}</span>
            </div>
        </swiper>
        <hr />
        <h4>剧照</h4>
        <swiper :key="'photoswiper' + filmDetail.photos.length" class="photoswiper" myclassname="photoswiper" perview="3">
            <div v-for="(photo, index) in filmDetail.photos" :key="index" class="swiper-slide">
                <img :src="photo" />
            </div>
        </swiper>

        <div class="btn">
            <button>立即购票</button>
        </div>
    </div>
</template>

<script>
import Axios from 'axios';
import swiper from '~/components/DetailSwiper.vue';
// import bus from '@/bus';

export default {
    components: {
        swiper
    },
    asyncData(data) {
        // 如果详情页面也使用asyncData请求数据，则无法使用this.$route获取数据，因为asyncData中没有this
        console.log(data);
        console.log(data.params, data.query);
    },
    // props: { filmId: { type: String, default: '' } },
    data() {
        return {
            filmId: '',
            filmDetail: null
        };
    },
    beforeMount() {
        // bus.$emit('tabbar-isShow', false);
        // this.$store.state.isTabbarShow = false;
        this.$store.commit('tabbarMutation', false);
        if (this.$route.query.FilmId) {
            this.filmId = this.$route.query.FilmId;
        } else {
            this.filmId = this.$route.params.FilmId;
        }
    },
    mounted() {
        // this.filmId = this.$route.params.filmId;
        Axios({
            url: `https://m.maizuo.com/gateway?filmId=${this.filmId}&k=3915873`,
            method: 'GET',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"159668407331181462568961","bc":"370100"}',
                'X-Host': 'mall.film-ticket.film.info'
            }
        }).then((res) => {
            this.filmDetail = res.data.data.film;
        });
    },
    beforeDestroy() {
        // bus.$emit('tabbar-isShow', true);
        // this.$store.state.isTabbarShow = true;
        this.$store.commit('tabbarMutation', true);
    }
};
</script>

<style lang="scss" scoped>
.poster {
    width: 100%;
    height: 300px;
}

h2,
h4 {
    margin-top: 0px;
    margin-bottom: 5px;
    margin-left: 10px;
}

p {
    font-size: 13px;
    color: #555555;
    margin: 10px;
}

hr {
    border: 1px solid #eeeeee;
}

span {
    font-size: 13px;
}

.btn {
    width: 100%;
    height: 60px;
    text-align: center;
    margin-top: 10px;
    button {
        width: 95%;
        height: 40px;
        background: orange;
        border: none;
        color: white;
    }
}
</style>
